<template>
  <div class="edit-box">
    <el-form label-width="120px" class="form-grid" :model="formData">
      <div class="form-box">
        <div class="item-left-box">
          <el-form-item label="订单号"><el-input v-model="formData.order_no" readonly /></el-form-item>
          <el-form-item label="商品名称"><el-input v-model="formData.product_name" readonly /></el-form-item>
          <el-form-item label="商品图片"><el-image :src="$imageFull(formData.product_image)"
              style="height: 80px" /></el-form-item>
          <el-form-item label="用户姓名"><el-input v-model="formData.nickname" readonly /></el-form-item>
          <el-form-item label="订单金额"><el-input v-model="formData.total_price" readonly /></el-form-item>
          <el-form-item label="产品金额"><el-input v-model="formData.product_price" readonly /></el-form-item>
          <el-form-item label="支付方式"><el-input v-model="formData.pay_type" readonly /></el-form-item>
          <el-form-item label="支付时间"><el-input v-model="formData.pay_time" readonly /></el-form-item>
          <el-form-item label="技工姓名"><el-input v-model="formData.technician.real_name" readonly /></el-form-item>
          <el-form-item label="技工电话"><el-input v-model="formData.technician.tel" readonly /></el-form-item>

          <el-form-item
            label="服务地址">{{formData.address.province+formData.address.city+formData.address.area+formData.address.address}}</el-form-item>
          <el-form-item label="建立时间"><el-input v-model="formData.create_time" readonly /></el-form-item>

        </div>

        <div class="item-right-box">
          <el-form-item label="订单状态">
            <el-tag
              :type="SERVICE_ORDER_STATUS[String(formData.status)] && SERVICE_ORDER_STATUS[String(formData.status)].type"
              disable-transitions>
              <i :class="SERVICE_ORDER_STATUS[String(formData.status)] && SERVICE_ORDER_STATUS[String(formData.status)].icon"
                style="margin-right: 4px" />
              {{ SERVICE_ORDER_STATUS[String(formData.status)] ? SERVICE_ORDER_STATUS[String(formData.status)].text : '未知状态' }}
            </el-tag>
          </el-form-item>
          <el-form-item label="售后类型">
            <el-tag
              :type="SERVICE_APPLY_FOR_TYPE[String(formData.apply_type)] && SERVICE_APPLY_FOR_TYPE[String(formData.apply_type)].type"
              disable-transitions>
              <i :class="SERVICE_APPLY_FOR_TYPE[String(formData.apply_type)] && SERVICE_APPLY_FOR_TYPE[String(formData.apply_type)].icon"
                style="margin-right: 4px" />
              {{ SERVICE_APPLY_FOR_TYPE[String(formData.apply_type)] ? SERVICE_APPLY_FOR_TYPE[String(formData.apply_type)].text : '无售后信息' }}
            </el-tag>
          </el-form-item>
          <el-form-item label="售后状态">
            <el-tag
              :type="SERVICE_ORDER_AFTER_SALES_STATUS[String(formData.after_sales_status)] && SERVICE_ORDER_AFTER_SALES_STATUS[String(formData.after_sales_status)].type"
              disable-transitions>
              <i :class="SERVICE_ORDER_AFTER_SALES_STATUS[String(formData.after_sales_status)] && SERVICE_ORDER_AFTER_SALES_STATUS[String(formData.after_sales_status)].icon"
                style="margin-right: 4px" />
              {{ SERVICE_ORDER_AFTER_SALES_STATUS[String(formData.after_sales_status)] ? SERVICE_ORDER_AFTER_SALES_STATUS[String(formData.after_sales_status)].text : '无售后信息' }}
            </el-tag>
          </el-form-item>
        </div>
      </div>





    </el-form>
  </div>
</template>

<script>
  import {
    SERVICE_ORDER_STATUS,
    SERVICE_APPLY_FOR_TYPE,
    SERVICE_ORDER_AFTER_SALES_STATUS
  } from '@/constants/statusMap';
  export default {
    name: "ReviewDetail",
    props: {
      formData: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        SERVICE_ORDER_STATUS,
        SERVICE_ORDER_AFTER_SALES_STATUS,
        SERVICE_APPLY_FOR_TYPE,
        remark: ""
      };
    },
    methods: {


    },
  };
</script>

<style scoped>
  .form-box {
    display: flex;
  }

  .edit-box {
    box-sizing: border-box;
    padding: 10px 40px 20px 10px;
  }

  .form-grid .el-form-item {
    margin-bottom: 20px;
  }

  .full-width {
    margin-top: 20px;
  }

  .full-width .el-input {

    width: 100%;
  }

  .btn-group {
    text-align: center;
  }
  .item-left-box{
    width: 50%;
  }
  .item-right-box{
    width: 50%;
  }
</style>
